<template>
  <!-- 竖版 -->
  <view class="container">
    <TmWaterfall v-if="list?.length" :width="695" :gutter="16" :round="8" :bottomHeight="25">
      <template v-for="(v, i) in list" :key="v.productLibId">
        <TmWaterfallItem>
          <PublicGoodsItem
            :goods="{
              productLibId: v.productLibId,
              imageUrl: v.imageUrl,
              productName: v.productName,
              price: v.minPrice,
              shopName: v.shopName,
              productType: v.productType,
              userId: v.userId,
              memberDiscountTagName: v.memberDiscountTagName,
              priceShowType:v.priceShowType
            }"
          ></PublicGoodsItem>
        </TmWaterfallItem>
      </template>
    </TmWaterfall>
  </view>
</template>

<script setup lang="ts">
  import { type PropType } from 'vue';
  import PublicGoodsItem from './index.vue';
  import TmWaterfall from '../tm-waterfall/tm-waterfall.vue';
  import TmWaterfallItem from '../tm-waterfall-item/tm-waterfall-item.vue';
  import type { ProductItem } from '@/api/mall/types';

  defineProps({
    list: Array as PropType<ProductItem[]>,
  });
</script>

<style lang="scss" scoped>
  .container {
    box-sizing: border-box;
    margin: 0 32rpx;
  }
</style>
